<template>
  <div ref="container" style="width: 100%" class="cusTomTip">
    <el-tooltip v-if="showTip" :content="text" placement="top" effect="dark">
      <div class="text-container">{{ text }}</div>
    </el-tooltip>
    <div v-else class="text-container">{{ text }}</div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      showTip: false,
      containerWidth: 0,
    };
  },
  computed: {
    isTextOverflow() {
      const textContainer =
        this.$refs.container?.querySelector(".text-container");
      return textContainer && textContainer.scrollWidth > this.containerWidth;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.containerWidth = this.$refs.container?.offsetWidth || 0;
      this.handleResize();
      window.addEventListener("resize", this.handleResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      this.showTip = this.isTextOverflow;
    },
  },
};
</script>

<style lang="scss" scoped>
.cusTomTip {
  .el-tooltip__popper {
    width: auto !important;
    max-width: 600px !important;
    white-space: pre-line !important;
  }
  .text-container {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-tooltip__popper {
    white-space: nowrap;
    background-color: #000;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
  }
}
</style>
